package showcase

import (
	"github.com/templui/templui/internal/components/datepicker"
	"github.com/templui/templui/internal/components/input"
	"github.com/templui/templui/internal/components/label"
)

templ DatePickerWithTime() {
	<div class="flex gap-4">
		<div class="flex flex-col gap-3">
			@label.Label(label.Props{
				For:   "date-picker",
				Class: "px-1",
			}) {
				Date
			}
			@datepicker.DatePicker(datepicker.Props{
				ID: "date-picker",
			})
		</div>
		<div class="flex flex-col gap-3">
			@label.Label(label.Props{
				For:   "time-picker",
				Class: "px-1",
			}) {
				Time
			}
			@input.Input(input.Props{
				Type:  input.TypeTime,
				ID:    "time-picker",
				Value: "10:30:00",
				Class: "appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none",
				Attributes: templ.Attributes{
					"step": "1",
				},
			})
		</div>
	</div>
}
